<template>
  <div class="box">
    <div class="boxleft">
      <div class="topMessage">
        <titlemessage :list="list.resources"></titlemessage>
        <div class="topMessageCenten">
          <div class="borderTop">
            <span>资源池名称</span>
            <span>上线时间</span>
            <span>版本</span>
            <span>机房地址</span>
          </div>
          <div class="boederBottom">
            <div
              class="boederBottomText"
              v-for="(item, index) in information"
              :key="index"
            >
              <span>{{ item.name }}</span>
              <span>{{ new Date(item.createTime).Format("yyyy-MM-dd") }}</span>
              <span>{{ item.version }}</span>
              <span>{{ item.addr }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="centenMessage">
        <titlemessage :list="list.fictitious"></titlemessage>
        <div class="centenMessageCenten">
          <div class="selece">
            <el-radio-group v-model="totalValue" class="ml-4">
              <el-radio label="总量" size="large">总量</el-radio>
              <span class="division">|</span>
              <el-radio label="配额" size="large">配额</el-radio>
            </el-radio-group>
          </div>
          <div class="centenClass">
            <div class="centenBorder">资源池名称</div>
            <div class="centenBorder">
              <img src="../assets/centen/CPU.png" alt="" />
              <span>vCPU</span>
            </div>
            <div class="centenBorder">
              <img src="../assets/centen/icon-neicun.png" alt="" />
              <span>内存(G)</span>
            </div>
            <div class="centenBorder">
              <img src="../assets/centen/icon-cunchu.png" alt="" />
              <span>存储(T)/高效</span>
            </div>
            <div class="centenBorder">
              <img src="../assets/centen/icon-neicun.png" alt="" />
              <span>存储(T)/全闪</span>
            </div>
          </div>
          <div class="centenBottom">
            <div
              class="centenBottomText"
              v-for="(item, index) in fictitiousValue"
              :key="index"
            >
              <span>{{ item.azName + "(" + item.poolName + ")" }}</span>
              <span>{{ item.newVCpu }}</span>
              <span>{{ item.newRam }}</span>
              <span>{{ item.newGxRom }}</span>
              <span>{{ item.newQxRom }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomCharts">
        <titlemessage :list="list.business"></titlemessage>
        <div class="echatsTitle">
          <radio :radioList="radioVal" @handleClickBtn="openingTrend"></radio>
        </div>
        <div class="echartsAll">
          <div class="erts">
            <TestEcharts :option="option"> </TestEcharts>
          </div>
        </div>
      </div>
    </div>
    <div class="boxCentenMap">
      <div class="map">
        <guganMap @handleClickBtn="cityChange"></guganMap>
      </div>
      <div class="mapBottom">
        <titlemessage :list="list.network"></titlemessage>
        <div class="radiogImg">
          <radioBorder :list="networkVal"> </radioBorder>
        </div>
      </div>
    </div>
    <div class="boxRight">
      <div class="rightTopMessage">
        <titlemessage :list="list.object"></titlemessage>
        <iconBorder :list="changeIcon"></iconBorder>
      </div>
      <div class="rightCenten">
        <titlemessage :list="list.security"></titlemessage>
        <div class="security">
          <anquanTable
            :tableList="tableValSele"
            :tableCenten="tableValCenten"
          ></anquanTable>
        </div>
      </div>
      <div class="rightBottom">
        <titlemessage :list="list.tenant"></titlemessage>
        <div class="lastSelest">
          <radio
            :radioList="radioValTwo"
            @handleClickBtn="tenantResources"
          ></radio>
        </div>

        <div class="tenant">
          <zuhuTable
            :tableList="tenantTh"
            :tableCentent="tenantContent"
          ></zuhuTable>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import TestEcharts from "../components/echarts.vue"; //封装图表组件
import titlemessage from "../components/titleMessage.vue"; //标题组件
import zuhuTable from "../components/tableAllHome/zuhuTable.vue"; //租户table组件
import anquanTable from "../components/tableAllHome/anquanTable.vue"; //下边框table表格组件
import iconBorder from "../components/iconBorder.vue"; //图标框组件
import radioBorder from "../components/radio.vue"; //圆框组件
import guganMap from "../components/guganMap.vue"; //3d地图组件
import selectEl from "../components/select.vue"; //封装后的下拉
import radio from "../components/radiobutton"; //封装的单选框

import { getResource, getResourceDetails, getCustomer } from "../api/main"; //封装的请求

import {
  ref,
  reactive,
  computed,
  getCurrentInstance,
  onMounted,
  watch,
  nexttick,
} from "vue";

//资源池基本信息
let information = ref("");

//租户资源占用分析表头
const tenantTh = ref([
  {
    thName: "排名",
  },
  {
    thName: "单位名称",
  },
  {
    thName: "储存G",
  },
]);

//存储租户资源占用分析内容
const storage = ref([
  {
    tdNumber: "1",
    taName: "竹溪县行政审批局",
    tdVal: "29750",
  },
  {
    tdNumber: "2",
    taName: "武汉君赢融合信息技术有限公司",
    tdVal: "8172",
  },
  {
    tdNumber: "3",
    taName: "湖北英瑞德信息技术有限公司",
    tdVal: "6000",
  },
  {
    tdNumber: "4",
    taName: "武汉市江岸区人民政府车站街道办事处",
    tdVal: "4146",
  },
  {
    tdNumber: "5",
    taName: "咸宁市住房和城乡建设局",
    tdVal: "1350",
  },
  {
    tdNumber: "6",
    taName: "红安县疾病预防控制中心",
    tdVal: "1150",
  },
  {
    tdNumber: "7",
    taName: "红安县大数据管理局",
    tdVal: "1100",
  },
  {
    tdNumber: "8",
    taName: "湖北泰诺通科技有限公司",
    tdVal: "1050",
  },
  {
    tdNumber: "9",
    taName: "湖北凉山轻工机械股份有限公司",
    tdVal: "750",
  },
  {
    tdNumber: "10",
    taName: "天门市财政局",
    tdVal: "680",
  },
]);

//内存租户资源占用分析内容
const Memory = ref([
  {
    tdNumber: "1",
    taName: "竹溪县行政审批局",
    tdVal: "880",
  },
  {
    tdNumber: "2",
    taName: "武汉君赢融合信息技术有限公司",
    tdVal: "268",
  },
  {
    tdNumber: "3",
    taName: "湖北英瑞德信息技术有限公司",
    tdVal: "160",
  },
  {
    tdNumber: "4",
    taName: "咸宁市住房和城乡建设局",
    tdVal: "132",
  },
  {
    tdNumber: "5",
    taName: "武汉市江岸区人民政府车站街道办事处",
    tdVal: "64",
  },
  {
    tdNumber: "6",
    taName: "红安县大数据管理局",
    tdVal: "40",
  },
  {
    tdNumber: "7",
    taName: "武汉洲际国际酒店",
    tdVal: "32",
  },
  {
    tdNumber: "8",
    taName: "天门市财政局",
    tdVal: "24",
  },
  {
    tdNumber: "9",
    taName: "红安县疾病预防控制中心",
    tdVal: "16",
  },
  {
    tdNumber: "10",
    taName: "来凤县乡村振兴局",
    tdVal: "16",
  },
]);

//vcpu租户资源占用分析内容
const vCPU = ref([
  {
    tdNumber: "1",
    taName: "竹溪县行政审批局",
    tdVal: "360",
  },
  {
    tdNumber: "2",
    taName: "武汉君赢融合信息技术有限公司",
    tdVal: "128",
  },
  {
    tdNumber: "3",
    taName: "湖北英瑞德信息技术有限公司",
    tdVal: "80",
  },
  {
    tdNumber: "4",
    taName: "咸宁市住房和城乡建设局",
    tdVal: "34",
  },
  {
    tdNumber: "5",
    taName: "武汉市江岸区人民政府车站街道办事处",
    tdVal: "16",
  },
  {
    tdNumber: "6",
    taName: "红安县大数据管理局",
    tdVal: "12",
  },
  {
    tdNumber: "7",
    taName: "天门市财政局",
    tdVal: "12",
  },
  {
    tdNumber: "8",
    taName: "红安县疾病预防控制中心",
    tdVal: "8",
  },
  {
    tdNumber: "9",
    taName: "来凤县乡村振兴局",
    tdVal: "8",
  },
  {
    tdNumber: "10",
    taName: "洪湖市方成电脑有限公司",
    tdVal: "8",
  },
]);

//租户资源占用分析动态数据
let tenantContentWH = ref(storage.value.slice(0, 6));
let tenantContentJZ = ref(storage.value.slice(5, 9));
let tenantContentSY = ref(storage.value.slice(6));
console.log("storage.value", storage.value.slice(3, 9));
let tenantContent=ref('')
tenantContent.value = vCPU.value.slice(0, 6)

//虚拟资源动态数据
const fictitiousValue = ref("");

//虚拟资源总量及配额百分比数据/总量
let total = ref([
  // {
  //   name: "AZ01通用专区(武汉二区)",
  //   vcpu: "2880",
  //   gVal: "7440",
  //   Efficient: "150",
  //   fullFlash: "15",
  // },
  // {
  //   name: "AZ02GPU专区(武汉二区)",
  //   vcpu: "624",
  //   gVal: "1148",
  //   Efficient: "24",
  //   fullFlash: "2",
  // },
]);

//虚拟资源总量及配额百分比数据/配额
let quotaValue = ref([
  // {
  //   name: "AZ01通用专区(武汉二区)",
  //   vcpu: "61.11%",
  //   gVal: "90.73%",
  //   Efficient: "110.90%",
  //   fullFlash: "154.21%",
  // },
  // {
  //   name: "AZ02GPU专区(武汉二区)",
  //   vcpu: "23.08%",
  //   gVal: "50.17%",
  //   Efficient: "0.00%",
  //   fullFlash: "0.00%",
  // },
]);

//业务动态所有数据
const businessAllWH = ref([
  //全闪云硬盘
  [29.35, 29.35, 23.13, 23.13],
  //高效云硬盘
  [50.65, 81.43, 136.65, 193.12],
  //内存g
  [2156, 3290, 4390, 6750],
  //vCPU
  [973, 1159, 1869, 1760],
]);
const businessAllJZ = ref([
  //全闪云硬盘
  [0, 0, 0, 0],
  //高效云硬盘
  [2.52, 2.01, 2.01, 12.02],
  //内存g
  [181, 159, 158, 681],
  //vCPU
  [46, 36, 36, 254],
]);
const businessAllSY = ref([
  //全闪云硬盘
  [0, 0, 0, 0],
  //高效云硬盘
  [0, 0, 0, 0],
  //内存g
  [0, 0, 0, 0],
  //vCPU
  [0, 0, 0, 0],
]);

let businessAll = ref(businessAllWH.value);
//业务动态数据
let businessVal = ref("");
businessVal.value = businessAll.value[0];

//安全产品数据表头
const tableValSele = ref([
  {
    thName: "安全组件名称",
  },
  {
    thName: "开通数量",
  },
  {
    thName: "2021/12",
  },
  {
    thName: "2021/1",
  },
  {
    thName: "2021/2",
  },
  {
    thName: "2021/3",
  },
  {
    thName: "2021/4",
  },
]);

//安全产品数据
const tableValCenten = ref([
  {
    name: "云主机安全",
    city: "5",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "1",
    last: "2",
  },
  {
    name: "云web应用防火墙",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云防火墙",
    city: "3",
    focus: "2",
    Branch: "",
    Satisfaction: "",
    lastTwo: "1",
    last: "",
  },
  {
    name: "云综合日志审计",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云漏洞扫描",
    city: "2",
    focus: "1",
    Branch: "",
    Satisfaction: "1",
    lastTwo: "",
    last: "",
  },
  {
    name: "云流量检测探针",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云数据库审计",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云网络安全审计",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云数据防泄漏",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云堡垒机",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云防篡改",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
  {
    name: "云态势感知",
    city: "1",
    focus: "1",
    Branch: "",
    Satisfaction: "",
    lastTwo: "",
    last: "",
  },
]);

//虚拟资源总量及配额百分比

const totalValue = ref("总量");

//业务占用开通趋势
const radioVal = ref([
  {
    value: "全闪",
    label: "全闪云硬盘(T)",
  },
  {
    value: "高效",
    label: "高效云硬盘(T)",
  },
  {
    value: "内存",
    label: "内存(G)",
  },
  {
    value: "vCPU",
    label: "vCPU(核)",
  },
]);

//租户资源占用分析
const radioValTwo = ref([
  {
    value: "vCPU",
    label: "vCPU",
  },
  {
    value: "内存",
    label: "内存",
  },
  {
    value: "存储",
    label: "存储",
  },
]);

//标题组件传值
const list = ref({
  resources: "资源池基本信息",
  fictitious: "虚拟资源总量及配额百分比",
  business: "业务占用开通数量趋势",
  object: "对象储存资料分析",
  security: "安全产品",
  tenant: "租户资源占用分析",
  network: "网络带宽占用数据",
});

let iconImgVal = ref([
  [
    {
      src: "iconBorder/icon-shijian.png",
      time: "2021/9/3",
      text: "上线时间",
    },
    {
      src: "iconBorder/icon-rongliang.png",
      time: "1047T",
      text: "可用容量",
    },
    {
      src: "iconBorder/icon-liyonglv.png",
      time: "0.03%",
      text: "实际利用率",
    },
  ],
  [
    {
      src: "iconBorder/icon-shijian.png",
      time: "2021/9/3",
      text: "上线时间",
    },
    {
      src: "iconBorder/icon-rongliang.png",
      time: "1047T",
      text: "可用容量",
    },
    {
      src: "iconBorder/icon-liyonglv.png",
      time: "0.03%",
      text: "实际利用率",
    },
  ],
  [
    {
      src: "iconBorder/icon-shijian.png",
      time: "2022/6/1",
      text: "上线时间",
    },
    {
      src: "iconBorder/icon-rongliang.png",
      time: "261T",
      text: "可用容量",
    },
    {
      src: "iconBorder/icon-liyonglv.png",
      time: "0%",
      text: "实际利用率",
    },
  ],
  [
    {
      src: "iconBorder/icon-shijian.png",
      time: "2021/12/3",
      text: "上线时间",
    },
    {
      src: "iconBorder/icon-rongliang.png",
      time: "436T",
      text: "可用容量",
    },
    {
      src: "iconBorder/icon-liyonglv.png",
      time: "0%",
      text: "实际利用率",
    },
  ],
]);

let networkValWH = ref([
  {
    val: "220.27",
    text: "平均入",
    mbit: "(Mbit/s)",
  },
  {
    val: "229.74",
    text: "平均出",
    mbit: "(Mbit/s)",
  },
  {
    val: "1127.39",
    text: "巅峰入",
    mbit: "(Mbit/s)",
  },
  {
    val: "1172.95",
    text: "峰值出",
    mbit: "(Mbit/s)",
  },
]);

let networkValJZ = ref([
  {
    val: "3.98",
    text: "平均入",
    mbit: "(Mbit/s)",
  },
  {
    val: "4.22",
    text: "平均出",
    mbit: "(Mbit/s)",
  },
  {
    val: "458.6",
    text: "巅峰入",
    mbit: "(Mbit/s)",
  },
  {
    val: "461.5",
    text: "峰值出",
    mbit: "(Mbit/s)",
  },
]);

let networkValSY = ref([
  {
    val: "暂无数据",
    text: "平均入",
    mbit: "(Mbit/s)",
  },
  {
    val: "暂无数据",
    text: "平均出",
    mbit: "(Mbit/s)",
  },
  {
    val: "暂无数据",
    text: "巅峰入",
    mbit: "(Mbit/s)",
  },
  {
    val: "暂无数据",
    text: "峰值出",
    mbit: "(Mbit/s)",
  },
]);

let networkVal = ref(networkValWH.value);

//vCPU核折线图
const option = reactive({
  title: {
    text: "", //主标题
    itemGap: 15, //主副标题之间间距
    textStyle: {
      //文字颜色
      color: "#98C1C4",
      //字体风格,'normal','italic','oblique'
      fontStyle: "normal",
      //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
      fontWeight: "bold",
      //字体系列
      fontFamily: "sans-serif",
      //字体大小
      fontSize: 12,
    },
    left: "left",
    top: 3,
    left: 18,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "line", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    top: "2%",
    left: "3%",
    right: "3%",
    bottom: "5%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: ["一月", "二月", "三月", "四月"],
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          fontSize: 10,
          color: "#757981",
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: "#757981",
          margin: 15,
        },
      },
      axisLine: {
        //y轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: "#6E7079",
          width: 1,
          type: "solid",
        },
      },
      splitLine: {
        //x轴虚线设置
        show: true,
        lineStyle: {
          type: "dashed",
          color: "transparent",
        },
      },
    },
  ],
  series: [
    {
      name: "vCPU开通数量",
      type: "line",
      lineStyle: {
        color: "#039AEF",
      },
      itemStyle: {
        normal: {
          color: "rgba(237, 61, 59, 0.6)",
        },
      },
      barWidth: "15", //设置柱状图宽度
      // data: [973, 1159, 1869, 2873],
      data: businessVal,
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 163, 255, 0.5)",
            },
            {
              offset: 1,
              color: "rgba(2, 140, 218, 0)",
            },
          ],
        },
        global: false, // 缺省为 false
      },
    },
  ],
});

let openingTrendName = ref("全闪");
//虚拟资源单选值
let openingTrend = (mess) => {
  switch (mess) {
    case "全闪":
      businessVal.value = businessAll.value[0];
      openingTrendName.value = "全闪";
      break;
    case "高效":
      businessVal.value = businessAll.value[1];
      openingTrendName.value = "高效";
      break;
    case "内存":
      businessVal.value = businessAll.value[2];
      openingTrendName.value = "内存";
      break;
    case "vCPU":
      businessVal.value = businessAll.value[3];
      openingTrendName.value = "vCPU";
      break;
  }
};

//租户资源占用分析
let tenantResources = (mess) => {
  console.log()
  switch (mess) {
    case "存储":
      tenantTh.value[2].thName = "存储";

      tenantContentWH.value = storage.value.slice(0, 6)
      tenantContentJZ.value = storage.value.slice(5, 9)
      tenantContentSY.value = storage.value.slice(6)
      tenantContent.value = tenantContentWH.value;
      switch (cityValue.value) {
        case "武汉市":
          tenantContent.value = tenantContentWH.value;
          break;
        case "十堰市":
          tenantContent.value = tenantContentSY.value;
          break;
        case "荆州市":
          tenantContent.value = tenantContentJZ.value;
          break;
      }

      break;
    case "内存":
      tenantTh.value[2].thName = "内存G";
      tenantContentWH.value = Memory.value.slice(0, 6)
      tenantContentJZ.value = Memory.value.slice(5, 9)
      tenantContentSY.value = Memory.value.slice(6)
       tenantContent.value = tenantContentWH.value;
      switch (cityValue.value) {
        case "武汉市":
          tenantContent.value = tenantContentWH.value;
          break;
        case "十堰市":
          tenantContent.value = tenantContentSY.value;
          break;
        case "荆州市":
          tenantContent.value = tenantContentJZ.value;
          break;
      }
      break;
    case "vCPU":
      tenantTh.value[2].thName = "vCPU核";
      tenantContentWH.value = vCPU.value.slice(0, 6)
      tenantContentJZ.value = vCPU.value.slice(5, 9)
      tenantContentSY.value = vCPU.value.slice(6)
      tenantContent.value = tenantContentWH.value;
      switch (cityValue.value) {
        case "武汉市":
          tenantContent.value = tenantContentWH.value;
          break;
        case "十堰市":
          tenantContent.value = tenantContentSY.value;
          break;
        case "荆州市":
          tenantContent.value = tenantContentJZ.value;
          break;
      }
      break;
  }
};

//去重
const removeDuplicateObj = (arr) => {
  let obj = {};
  arr = arr.reduce((newArr, next) => {
    obj[next.poolName] ? "" : (obj[next.poolName] = true && newArr.push(next));
    return newArr;
  }, []);
  return arr;
};

//是否选中城市
let cityValue = ref("");

let changeIcon = ref(iconImgVal.value[0]);

//切换地图城市
let cityChange = (mess) => {
  cityValue.value = mess;
  switch (mess) {
    case "武汉市":
      fictitiousValue.value = getZiYuan.value[0];
      information.value = getMessage.value[0];
      changeIcon.value = iconImgVal.value[1]; //武汉
      networkVal.value = networkValWH.value;
      businessAll.value = businessAllWH.value;
      switch (openingTrendName.value) {
        case "全闪":
          businessVal.value = businessAll.value[0];
          break;
        case "高效":
          businessVal.value = businessAll.value[1];
          break;
        case "内存":
          businessVal.value = businessAll.value[2];
          break;
        case "vCPU":
          businessVal.value = businessAll.value[3];
          break;
      }
      tenantContent.value = tenantContentWH.value;
      break;
    case "十堰市":
      fictitiousValue.value = getZiYuan.value[1];
      information.value = getMessage.value[1];
      changeIcon.value = iconImgVal.value[2]; //十堰
      networkVal.value = networkValSY.value;
      businessAll.value = businessAllSY.value;
      switch (openingTrendName.value) {
        case "全闪":
          businessVal.value = businessAll.value[0];
          break;
        case "高效":
          businessVal.value = businessAll.value[1];
          break;
        case "内存":
          businessVal.value = businessAll.value[2];
          break;
        case "vCPU":
          businessVal.value = businessAll.value[3];
          break;
      }
      tenantContent.value = tenantContentSY.value 
      break;
    case "荆州市":
      fictitiousValue.value = getZiYuan.value[2];
      information.value = getMessage.value[2];
      changeIcon.value = iconImgVal.value[3]; //荆州
      networkVal.value = networkValJZ.value;
      businessAll.value = businessAllJZ.value;
      switch (openingTrendName.value) {
        case "全闪":
          businessVal.value = businessAll.value[0];
          break;
        case "高效":
          businessVal.value = businessAll.value[1];
          break;
        case "内存":
          businessVal.value = businessAll.value[2];
          break;
        case "vCPU":
          businessVal.value = businessAll.value[3];
          break;
      }
      tenantContent.value = tenantContentJZ.value 
      break;
  }
};

//转换标准时间格式函数
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
  };
  if (/(y+)/.test(fmt)) {
    //根据y的长度来截取年
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  }
  return fmt;
};

let getZiYuan = ref([[], [], []]); //虚拟资源总量及配额百分比切换

let getMessage = ref([[], [], []]); //资源基本信息切换

//资源池/业务占用开通数量趋势
getResource().then((r) => {
  console.log("getResource", r.data);
  information.value = r.data;

  if (
    getMessage.value[0] != "" &&
    getMessage.value[1] != "" &&
    getMessage.value[2] != ""
  ) {
    getMessage.value[0] == "";
    getMessage.value[1] == "";
    getMessage.value[2] == "";
  }

  for (let i = 0; i < r.data.length; i++) {
    if (r.data[i].name == "武汉二区") {
      getMessage.value[0].push(r.data[i]);
    }
    if (information.value[i].name == "十堰一区") {
      getMessage.value[1].push(information.value[i]);
    }
    if (information.value[i].name == "荆州一区") {
      getMessage.value[2].push(information.value[i]);
    }
  }

  let arrGx = [];
  let arrQs = [];
  let arrRam = [];
  let arrVcpu = [];

  for (let i = 0; i < r.data.length; i++) {
    arrGx.push(r.data[i].gxHdd); //高效云硬盘
    arrQs.push(r.data[i].qsHdd); //全闪云硬盘
    arrRam.push(r.data[i].ram); //内存g
    arrVcpu.push(r.data[i].vcpu); //vCPU
  }

  // businessAll.value.push(arrGx, arrQs, arrRam, arrVcpu);
  // console.log('businessAll.value',businessAll.value)
  // businessVal.value = businessAll.value[0];
});

// getResource("beginCDate=2022-05-1 00:00:00&endCDate=2022-05-30 00:00:00").then(
//   (r) => {
//     console.log(r);
//   }
// );

//安全产品接口
getCustomer().then((r) => {
  console.log(r.data);
  // tableValCenten.value = r.data;
  for (let i = 0; i < r.data.length; i++) {
    r.data[i].machineSecurity;
    // console.log(r.data[i].machineSecurity);//安全
  }
});

watch(
  //监听虚拟资源单选值
  () => totalValue.value,
  (newVal, oldVal) => {
    if (newVal == "总量") {
      //虚拟资源总量及配额百分比数据/总量,新数据
      getResourceDetails().then((r) => {
        // if (cityValue.value == "") {
        fictitiousValue.value = r.data;
        // }

        if (
          getZiYuan.value[0] != "" &&
          getZiYuan.value[1] != "" &&
          getZiYuan.value[2] != ""
        ) {
          getZiYuan.value[0] == "";
          getZiYuan.value[1] == "";
          getZiYuan.value[2] == "";
        }

        for (let i = 0; i < r.data.length; i++) {
          if (r.data[i].poolName == "武汉二区") {
            getZiYuan.value[0].push(r.data[i]);
          }
          if (r.data[i].poolName == "十堰一区") {
            getZiYuan.value[1].push(r.data[i]);
          }
          if (r.data[i].poolName == "荆州一区") {
            getZiYuan.value[2].push(r.data[i]);
          }
        }

        // console.log(fictitiousValue.value);
      });
      return;
    }

    if (newVal == "配额") {
      //赋值修改数据
      for (let i = 0; i < fictitiousValue.value.length; i++) {
        fictitiousValue.value[i].newVCpu = fictitiousValue.value[i].oldVCpu;
        fictitiousValue.value[i].newRam = fictitiousValue.value[i].oldRam;
        fictitiousValue.value[i].newGxRom = fictitiousValue.value[i].oldGxRom;
        fictitiousValue.value[i].newQxRom = fictitiousValue.value[i].oldQsRom;
      }
      return;
    }
  },
  {
    immediate: true, // 立即执行
    deep: true, // 深度监听
  }
);

onMounted(() => {});
</script>
<style lang='less' scoped>
.box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5% 2%;
  .boxleft {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .topMessage {
      width: 100%;
      height: 20%;
    }
    .topMessage,
    .centenMessage {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .topMessageTitle,
      .centenMessageTitle {
        display: flex;
        align-items: center;
      }
      .topMessageCenten {
        width: calc(100%-2px);
        height: 60%;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid rgba(2, 140, 218, 0.5);
        .borderTop {
          width: 100%;
          height: 45%;
          margin: -1px -1px 0px -1px;
          border: 1px solid rgba(2, 140, 218, 0.5);
        }
        .borderTop,
        // .boederBottom,
        .boederBottomText {
          opacity: 1;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          span {
            // text-align: center;
            width: 15%;
            font-size: 12px;
            color: #028cda;
          }
          span:last-child {
            width: 35%;
          }
        }
        .boederBottom {
          overflow: auto;
          width: 100%;
          height: 55%;
          span {
            color: #bac6cc;
          }
        }
        .boederBottomText {
          width: 100%;
          height: 100%;
          span {
            color: #bac6cc;
          }
        }
      }
    }
    .centenMessage {
      width: 100%;
      height: 30%;
      .centenMessageCenten {
        width: 100%;
        height: 80%;
        .selece {
          width: 17%;
          height: 15%;
          background: #004064;
          border-radius: 2px 2px 2px 2px;
          float: right;
          display: flex;
          align-items: center;
          justify-content: center;
          /deep/.el-radio-group {
            display: flex !important;
            flex-wrap: nowrap;
            width: 1px;
            position: relative;
            left: -15px;
            .el-radio el-radio--large {
              width: 5px;
            }
            .el-radio {
              width: 10%;
              color: #d6e3ea;
              font-size: 14px;
            }
            .el-radio__input {
              display: none;
            }
            .el-radio__input.is-checked + .el-radio__label {
              color: #00a3ff;
            }
            .el-radio__label {
              padding-left: 0;
            }
          }
          .division {
            font-size: 10px;
            color: #d6e3ea;
            margin: 0 4px;
            position: relative;
            right: 2px;
          }
        }
        .centenClass {
          color: #d6e3ea;
          font-size: 12px;
          // background: #bfa;
          width: 100%;
          height: 18%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: center;
          margin-top: 9%;
          .centenBorder {
            width: 15%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(2, 140, 218, 0.5);
            // box-shadow: inset 0px 1px 2px 1px #028cda,
            //   inset 0px -1px 2px 1px #028cda;
            border-radius: 2px 2px 2px 2px;
            img {
              width: 18px;
              margin: 0 2px;
            }
            span {
              color: #d6e3ea;
              // width: 60%;
            }
          }
        }
        .centenBottom {
          margin-top: 3%;
          width: 100%;
          height: 50%;
          border: 1px solid rgba(2, 140, 218, 0.5);
          overflow: auto;
          .centenBottomText {
            width: calc(100% - 1px);
            height: 50%;
            display: flex;
            span {
              padding: 0 2px;
              text-align: center;
              display: flex;
              width: 20%;
              font-size: 12px;
              color: #bac6cc;
              justify-content: center;
              align-items: center;
              // border: 1px solid rgba(2, 140, 218, 0.5);
              border-bottom: 1px solid rgba(2, 140, 218, 0.5);
              border-right: 1px solid rgba(2, 140, 218, 0.5);
              border-radius: 2px 2px 2px 2px;
              margin: 0px -1px -1px 0px;
            }
          }
        }
      }
    }
    .bottomCharts {
      display: flex;
      width: 100%;
      height: 40%;
      flex-direction: column;
      justify-content: space-between;
      .echatsTitle {
        width: 100%;
      }
      .echartsAll {
        width: 100%;
        height: 75%;
        .erts {
          margin-top: 8%;
          height: 88%;
          width: 100%;
        }
      }
    }
  }
  .boxCentenMap {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .map {
      width: 98%;
      margin: 0 auto;
      height: 65%;
    }
    .mapBottom {
      width: 75%;
      margin: 0 auto;
      height: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .radiogImg {
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .boxRight {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .rightTopMessage {
      width: 100%;
      height: 15%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .rightCenten {
      width: 100%;
      height: 45%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      // background: #bfa;
      .security {
        width: 100%;
        height: 80%;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
      }
    }
    .rightBottom {
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .lastSelest {
        width: 100%;
        // height: 20%;
      }
      .tenant {
        width: 100%;
        height: 65%;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
      }
    }
  }
}
</style>

